<template>
  <div>
    <h2>羊场设置</h2>
    <div>
      <el-form
        :model="form"
        label-width="auto"
        style="max-width: 1000px"
        :inline="true"
      >
        <el-form-item label="羊场全称">
          <el-input v-model="form.sheepfarmName" style="width: 250px" />
        </el-form-item>
        <el-form-item label="负责人">
          <el-input v-model="form.sheepfarmHead" style="width: 250px" />
        </el-form-item>
        <div style="margin-left: 800px; margin-top: -45px">
          <el-button type="danger" @click="Getlist()">查询</el-button>
          <el-button>重置</el-button>
        </div>
      </el-form>
      <br />
      <hr />
      <br />
      <el-form
        :model="form"
        label-width="auto"
        style="max-width: 1000px"
        :inline="true"
      >
        <el-button type="danger" @click="dialogFormVisible = true"
          >+ 新增</el-button
        >
        <el-button type="danger">删除</el-button>
      </el-form>
    </div>
    <br />
  </div>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="sheepfarmscaleId" label="序号" width="70" />
    <el-table-column prop="name" label="羊场编码" width="100" />
    <el-table-column prop="sheepfarmName" label="羊场全称" width="100" />
    <el-table-column prop="sheepfarmSimpleName" label="羊场简称" width="100" />
    <el-table-column prop="createBooksDate" label="建账日期" width="180" />
    <el-table-column prop="sheepfarmHead" label="负责人" width="100" />
    <el-table-column prop="fulladdress" label="详细地址" width="100" />
    <el-table-column prop="departmentName" label="管理部门" width="100" />
    <el-table-column prop="isOpen" label="状态" width="100" />
    <el-table-column prop="name" label="创建人" width="100" />
    <el-table-column prop="date" label="创建时间" width="100" />
    <el-table-column prop="name" label="修改人" width="100" />
    <el-table-column prop="date" label="修改时间" width="100" />
    <el-table-column prop="address" label="操作" width="180">
      <template v-slot="{ row }">
        <el-button type="primary" link>修改</el-button>
        <el-button type="primary" link>删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div>
    <el-dialog v-model="dialogFormVisible" title="羊场设置-新增" width="500">
      <el-form :model="form">
        <el-form-item label="羊场全称" :label-width="formLabelWidth">
          <el-input v-model="form.sheepfarmName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="羊场简称" :label-width="formLabelWidth">
          <el-input v-model="form.sheepfarmSimpleName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="羊场规模" :label-width="formLabelWidth">
          <el-select
            v-model="form.sheepfarmscaleId"
            placeholder="请选择羊场规模"
          >
            <el-option label="500只以下" :value="1" />
            <el-option label="500-1000只" :value="2" />
            <el-option label="1000-3000只" :value="3" />
            <el-option label="3000-5000只" :value="4" />
            <el-option label="5000只以上" :value="5" />
          </el-select>
        </el-form-item>
        <el-form-item label="羊场地址" :label-width="formLabelWidth">
          <el-select
            v-model="form.proviceId"
            placeholder="请选择省份"
            style="width: 105px"
            @change="CityList"
          >
            <el-option
              v-for="item in provinceData"
              :key="item.provinceId"
              :label="item.provinceName"
              :value="item.provinceId"
            />
          </el-select>
          <el-select
            v-model="form.cityId"
            placeholder="请选择城市"
            style="width: 110px"
            @change="CountyList"
          >
            <el-option
              v-for="item in CityData"
              :key="item.cityId"
              :label="item.cityName"
              :value="item.cityId"
            />
          </el-select>
          <el-select
            v-model="form.countyId"
            placeholder="请选择县城"
            style="width: 110px"
          >
            <el-option
              v-for="item in CountyData"
              :key="item.countyId"
              :label="item.countyName"
              :value="item.countyId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址" :label-width="formLabelWidth">
          <el-input v-model="form.fulladdress" autocomplete="off" />
        </el-form-item>
        <el-form-item label="建账日期" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.createBooksDate"
            type="date"
            placeholder="Pick a Date"
            format="YYYY-MM-DD"
            style="width: 330px"
          />
        </el-form-item>
        <el-form-item label="负责人" :label-width="formLabelWidth">
          <el-input v-model="form.sheepfarmHead" autocomplete="off" />
        </el-form-item>
        <el-form-item label="管理部门" :label-width="formLabelWidth">
          <el-select v-model="form.departmentId" placeholder="请选择羊场规模">
            <el-option v-for="item in DepartmentData" :label="item.departmentName" :value="item.departmentId" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否启用" :label-width="formLabelWidth">
          <el-radio-group v-model="form.isOpen">
            <el-radio :value="1">是</el-radio>
            <el-radio :value="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="BeginAdd()"> 保存 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { ElMessage } from "element-plus";
import { reactive, ref, onMounted } from "vue";
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
onMounted(() => {
  Getlist();
  ProviceList();
  DepartmentSelect();
});
const form = reactive({
  pagesize: 2,
  pageindex: 1,
  sheepfarmName: "",
  sheepfarmHead: "",
  cityId: "",
  countyId: "",
  sheepfarmSimpleName: "",
  sheepfarmscaleId: "",
  proviceId: "",
  fulladdress: "",
  createBooksDate: "",
  departmentId: "",
  isOpen: "",
});
const tableData = ref([]);
function Getlist() {
  axios
    .post("http://localhost:5012/api/SheepFarm/SheepFarmlist", {
      pagesize: form.pagesize,
      pageindex: form.pageindex,
      sheepfarmName: form.sheepfarmName,
      sheepfarmHead: form.sheepfarmHead,
    })
    .then((res) => {
      console.log(res);
      tableData.value = res.data.data.data;
    });
}
function BeginAdd() {
  axios
    .post("http://localhost:5012/api/SheepFarm/SheepFarmAdd", {
      sheepfarmName: form.sheepfarmName,
      sheepfarmHead: form.sheepfarmHead,
      cityId: form.cityId,
      countyId: form.countyId,
      sheepfarmSimpleName: form.sheepfarmSimpleName,
      sheepfarmscaleId: form.sheepfarmscaleId,
      proviceId: form.proviceId,
      fulladdress: form.fulladdress,
      createBooksDate: form.createBooksDate,
      departmentId: form.departmentId,
      isOpen: form.isOpen,
    })
    .then((res) => {
      if(res.data.code==0)
      {
        ElMessage.success("新增成功");
      }
      else
      {
        ElMessage.error("新增失败");
        return;
      }
    });
}
// 省份显示信息
const provinceData = ref([]);
form.cityId = "";
form.countyId = "";
const ProviceList = () => {
  axios.post("http://localhost:5012/api/Sheep/ProviceList", {}).then((res) => {
    console.log(res.data);
    provinceData.value = res.data.data;
  });
};
// 市区显示信息
const CityData = ref([]);
const CityList = () => {
  axios
    .post("http://localhost:5012/api/Sheep/CityList", {
      provionId: form.provinceId,
    })
    .then((res) => {
      console.log(res.data);
      CityData.value = res.data.data;
    });
};
// 区县显示信息
const CountyData = ref([]);
const CountyList = () => {
  axios
    .post("http://localhost:5012/api/Sheep/CountyList", {
      cityId: form.cityId,
    })
    .then((res) => {
      console.log(res.data);
      CountyData.value = res.data.data;
    });
};
//部门下拉框
const DepartmentData=ref([])
function DepartmentSelect()
{
  axios.post("http://localhost:5012/api/Sheep/DePartmentList",{
    pagesize:5,
    pageindex:1
  })
  .then(res=>{
    DepartmentData.value=res.data.data.data
  })
}
</script>

<style scoped></style>
